@import '../style/theme/color';
@import '../style/theme/shadow';
@import '../style/theme/corner';
@import '../style/core/_font';

$devui-table-inset-shadow-left: var(--devui-table-inset-shadow-left, 8px 0 8px -4px);
$devui-table-inset-shadow-right: var(--devui-table-inset-shadow-right, -8px 0 8px -4px);

:host {
  display: block;

  &.devui-table-shadow {
    border-radius: $devui-border-radius;
    overflow: hidden;
    box-shadow: $devui-shadow-length-base $devui-light-shadow;

    ::ng-deep table tbody tr:last-child td {
      border-bottom-color: transparent;
    }
  }
}

.devui-data-table ::ng-deep {
  border: none;
  height: 100%;

  .devui-table-view {
    padding: 0;
    border: none;
    position: relative;
    height: 100%;

    &.contain-fix-height {
      display: flex;
      flex-direction: column;

      .scroll-view {
        flex: 1;
      }
    }

    .scroll-view {
      overflow-x: auto;
      overflow-y: scroll;

      &.overflow-overlay {
        overflow: hidden;

        &:hover {
          overflow: auto;
          overflow: overlay;
        }
      }

      &.has-width-scroll:not(:hover)::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        width: 50px;
        background: linear-gradient(90deg, transparent, $devui-base-bg);
      }

      &.has-height-scroll:not(:hover)::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 20px;
        background: linear-gradient(180deg, transparent, $devui-base-bg);
      }
    }

    .devui-table {
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
      width: 100%;
      max-width: 100%;
      margin: 0;

      & > tbody + tbody {
        border-top: none;
      }
    }

    .viewport-wrapper {
      overflow-x: auto;
      overflow-y: scroll;
      position: relative;

      &.overflow-overlay {
        overflow: hidden;

        &:hover {
          overflow: auto;
          overflow: overlay;
        }
      }

      &.has-width-scroll:not(:hover)::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        width: 50px;
        background: linear-gradient(90deg, transparent, #ffffff);
      }

      &.has-height-scroll:not(:hover)::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 20px;
        background: linear-gradient(180deg, transparent, #ffffff);
      }
    }

    .resize-bar {
      top: 0;
      bottom: 0;
      position: absolute;
      cursor: col-resize;
      background: $devui-form-control-line-active;
      width: 2px;
      z-index: 9999;
      display: none;
    }

    .resize-overlay {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1000;
    }
  }
  $half-sort-icon-size: 8px;

  .table-wrap {
    overflow-y: auto;
  }

  .virtual-scroll-wrap {
    & .cdk-virtual-scroll-content-wrapper {
      padding-top: $half-sort-icon-size;
    }
  }

  .devui-scrollbar {
    scrollbar-width: thin;
  }
}

.devui-table ::ng-deep {
  thead {
    span {
      font-weight: bold;
      color: $devui-text;
      font-size: $devui-font-size-sm;
    }

    tr {
      background-color: $devui-base-bg;

      th {
        text-align: left;
        background-clip: padding-box !important;
        $drag-icon-size: 16px;
        $drag-icon-margin-right: 2px;
        $filter-icon-size: 16px;
        $sort-clickable-area: 8px;
        $half-sort-icon: 8px;
        $childtable-toggler-icon: 20px;
        $negative-half-sort-icon-size: -($sort-clickable-area + $half-sort-icon); // 排序图标的大小为16 * 16 px，所以图标需要移动8px，让图标的一半显示在标题头外

        border-bottom: 1px solid $devui-dividing-line;
        display: table-cell;
        padding: 0;
        font-size: 0;
        background-color: inherit;

        .drag-icon {
          display: inline-block;
          margin-right: $drag-icon-margin-right;
          visibility: hidden;
        }

        .drag-icon + .childtable-toggler {
          > .customized-icon {
            font-size: $devui-font-size-icon;
          }
        }

        > * {
          display: inline-block;
        }

        .title,
        .parent-title {
          display: inline-block;
          max-width: calc(100% - #{$drag-icon-size} - #{$drag-icon-margin-right});
          line-height: 42px;
          vertical-align: middle;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: $devui-font-size-sm;
          font-weight: bold;
          color: $devui-text;
        }

        .title.can-filter {
          width: calc(100% - #{$drag-icon-size} - #{$drag-icon-margin-right} - #{$filter-icon-size});
        }

        .childtable-toggler + .title {
          width: calc(100% - #{$drag-icon-size} - #{$drag-icon-margin-right} - #{$childtable-toggler-icon});
        }

        .childtable-toggler + .title.can-filter {
          width: calc(100% - #{$drag-icon-size} - #{$drag-icon-margin-right} - #{$filter-icon-size} - #{$childtable-toggler-icon});
        }

        // .sort-clickable {
        //   position: absolute;
        //   top: $negative-half-sort-icon-size;
        //   left: 50%;
        //   transform: translateX(-50%);
        //   padding: $sort-clickable-area;
        // }
        &:hover,
        &.hover {
          border-radius: $devui-border-radius 0 0 $devui-border-radius;

          d-table-sort {
            display: block;
          }

          d-table-filter {
            display: block;
          }

          .filter-icon {
            visibility: visible;
          }

          .sort-icon-default {
            visibility: visible;
          }
        }

        &.operable:hover {
          background-color: $devui-list-item-hover-bg;
        }

        &.sindu_handle:hover,
        &.sindu_handle.hover {
          border-radius: $devui-border-radius 0 0 $devui-border-radius;

          .drag-icon {
            visibility: visible;
          }

          .hidden-icon.drag-icon {
            visibility: hidden;
          }
        }

        &.devui-checkable-cell {
          padding: 10px 0 10px 20px;
        }

        &.devui-detail-cell {
          width: 36px;
          text-align: center;
          padding: 0;
          cursor: pointer;
        }

        &.devui-sticky-left-cell,
        &.devui-sticky-right-cell {
          position: sticky;
          z-index: 5;
        }

        & .header-container {
          position: relative;
          display: flex;
          align-items: center;
          padding-left: 2px;
          padding-right: 8px;
        }
      }

      .sort-active {
        background: $devui-list-item-hover-bg;
        border-radius: $devui-border-radius 0 0 $devui-border-radius;
      }

      .filter-active {
        background: $devui-list-item-hover-bg;
        border-radius: $devui-border-radius 0 0 $devui-border-radius;
      }

      .check-box-all {
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }

  tbody > tr {
    background: $devui-base-bg;
    user-select: auto;

    &.table-row-selected {
      background: $devui-list-item-selected-bg;
    }

    > td {
      background-clip: padding-box;
      vertical-align: middle;
      padding: 10px 20px 9px;
      border-top: none;
      word-wrap: break-word;
      word-break: normal;
      line-height: 22px;
      font-size: $devui-font-size;
      color: $devui-text; // #3C4458;
      background-color: inherit;
      border-bottom: 1px solid $devui-dividing-line;

      &.editable-cell {
        position: relative;

        &:hover::after {
          content: '';
          display: block;
          width: calc(100% - 32px);
          position: absolute;
          height: calc(100% - 14px);
          border: 1px solid $devui-line;
          left: 12px;
          top: 8px;
          border-radius: $devui-border-radius;
          pointer-events: none;
        }
      }

      &.devui-checkable-cell {
        padding: 10px 0 10px 20px;
      }

      &.devui-detail-cell {
        width: 36px;
        text-align: center;
        padding: 0;
        cursor: pointer;
      }

      &.devui-sticky-left-cell,
      &.devui-sticky-right-cell {
        position: sticky;
        z-index: 5;
      }
    }
  }

  .clickable {
    cursor: pointer;
    vertical-align: middle;
  }

  .d-checkbox > label {
    margin: auto;
  }

  svg.svg-icon rect {
    stroke: $devui-disabled-text;
  }

  svg.svg-icon.svg-icon-close rect:last-child {
    stroke: none;
    fill: $devui-disabled-text;
  }

  path {
    fill: $devui-disabled-text;
  }

  svg.svg-icon:hover g path {
    fill: $devui-icon-fill-active;
  }

  svg.svg-icon:hover g rect {
    stroke: $devui-icon-fill-active;
  }

  svg.svg-icon.svg-icon-close:hover rect:last-child {
    stroke: none;
    fill: $devui-icon-fill-active;
  }

  .resize-handle {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
  }

  .resizeable:hover {
    .resize-handle {
      border-right: 1px solid $devui-line;
    }
  }

  .resizeable {
    .resize-handle:hover {
      border-right: 2px solid $devui-form-control-line-active;
    }
  }
}

.devui-no-result-wrapper {
  padding: 40px 0;
  background: $devui-base-bg;
  width: calc(100% - 8px);

  &.overlay-table-no-result {
    width: 100%;
  }
}

.devui-table.area-active ::ng-deep {
  thead > tr > th {
    &.operable {
      background-color: $devui-list-item-hover-bg;

      .filter-icon {
        visibility: visible;
      }

      .sort-icon-default {
        visibility: visible;
      }
    }
  }
}

.devui-table ::ng-deep {
  thead > tr > th.can-sort {
    d-table-filter {
      flex: 1;
      text-align: right;
    }
  }
}

.devui-table {
  &.devui-table-md ::ng-deep {
    tbody > tr > td {
      padding: 11px 20px 12px;
    }

    thead > tr > th.devui-checkable-cell {
      padding: 10px 20px;
    }
  }

  &.devui-table-lg ::ng-deep {
    tbody > tr > td {
      padding: 15px 20px 16px;
    }

    thead > tr > th.devui-checkable-cell {
      padding: 10px 20px;
    }
  }

  &.devui-table-xs ::ng-deep {
    tbody > tr > td {
      padding: 4px 20px 4px;
    }

    thead > tr > th.devui-checkable-cell {
      padding: 10px 20px;
    }

    thead tr th .title {
      line-height: 32px;
    }
  }
}

.devui-table.table-striped ::ng-deep {
  tbody > tr:nth-of-type(even) {
    background: $devui-list-item-strip-bg;
  }
}

.devui-table.table-borderless ::ng-deep {
  tbody > tr {
    > td {
      border-bottom: none;
    }
  }
}

.devui-table.header-bg ::ng-deep {
  thead {
    tr {
      background-color: $devui-list-item-strip-bg;

      .devui-first-sticky-right-cell {
        background: linear-gradient(to right, transparent, $devui-list-item-strip-bg 10px);
      }

      .devui-last-sticky-left-cell {
        background: linear-gradient(to left, transparent, $devui-list-item-strip-bg 10px);
      }
    }
  }
}

.devui-table.table-bordered ::ng-deep {
  tr {
    td:first-child {
      border-left: 1px solid $devui-dividing-line;
    }

    td {
      border-right: 1px solid $devui-dividing-line;
    }
  }

  thead {
    tr {
      th:first-child {
        border-left: 1px solid $devui-dividing-line;
      }

      th {
        border-top: 1px solid $devui-dividing-line;
        border-right: 1px solid $devui-dividing-line;
      }
    }
  }
}

.devui-table.table-hover ::ng-deep {
  tbody > tr:not(.table-row-selected):not(.expand-row):not(.child-table):hover {
    background: $devui-list-item-hover-bg;

    .devui-first-sticky-right-cell {
      background: linear-gradient(to right, transparent, $devui-list-item-hover-bg 10px);
    }

    .devui-last-sticky-left-cell {
      background: linear-gradient(to left, transparent, $devui-list-item-hover-bg 10px);
    }
  }
}

:host ::ng-deep .devui-toggle-childtable {
  cursor: pointer;
  margin-right: 5px;

  & > svg {
    vertical-align: middle;

    & > g > path {
      fill: $devui-placeholder; // TODO: Color-Question
    }
  }
}

:host ::ng-deep .full-width {
  width: 100%;
}

:host ::ng-deep .hover-bg {
  background: $devui-list-item-hover-bg;
  pointer-events: none;

  & + th {
    pointer-events: none;
  }
}

:host ::ng-deep .table-view-selector {
  user-select: none;
  cursor: col-resize;
}

:host ::ng-deep .edit-padding-fix {
  margin-top: -6px;
  margin-bottom: -6px;
}

:host ::ng-deep .childtable-toggler {
  cursor: pointer;
  padding-right: 8px;
  font-size: unset !important;

  & > svg {
    vertical-align: middle;

    & > g > path {
      fill: $devui-placeholder;// TODO: Color-Question
    }
  }
}

:host ::ng-deep .table.table-bordered.table-fix-header {
  border-bottom: 0;

  th {
    border-bottom: 0;
  }
}

:host ::ng-deep table {
  &.table-fix-header thead tr {
    th:first-child {
      border-top-left-radius: $devui-border-radius;
    }

    th:last-child {
      border-top-right-radius: $devui-border-radius;
    }
  }

  thead tr {
    th:first-child {
      border-top-left-radius: $devui-border-radius;
    }

    th:last-child {
      border-top-right-radius: $devui-border-radius;
    }
  }

  tbody tr:last-child {
    td:first-child {
      border-bottom-left-radius: $devui-border-radius;
    }

    td:last-child {
      border-bottom-right-radius: $devui-border-radius;
    }
  }
}

:host ::ng-deep .devui-talbe-scorll-middle,
:host ::ng-deep .devui-talbe-scorll-right {
  tr,
  th {
    .devui-last-sticky-left-cell {
      background: linear-gradient(to left, transparent, $devui-base-bg 10px);

      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 10px;
        pointer-events: none;
        box-shadow: inset $devui-table-inset-shadow-left $devui-light-shadow;
      }
    }
  }
}

:host ::ng-deep .devui-talbe-scorll-middle,
:host ::ng-deep .devui-talbe-scorll-left {
  tr,
  th {
    .devui-first-sticky-right-cell {
      background: linear-gradient(to right, transparent, $devui-base-bg 10px);

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 10px;
        pointer-events: none;
        box-shadow: inset $devui-table-inset-shadow-right $devui-light-shadow;
      }
    }
  }
}

:host ::ng-deep .gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

:host ::ng-deep .gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;

  /* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; */

  /* filter: alpha(opacity=80); */
  background-color: white;
  box-shadow: $devui-shadow-length-connected-overlay var(--dark-1-boxshadow, rgba(41, 48, 64, 0.2));
  list-style: none;
}

:host ::ng-deep .gu-hide {
  display: none !important;
}

:host ::ng-deep .sindu_dragger {
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
}

:host ::ng-deep .sindu_handle > .header-container > .drag-icon {
  cursor: move;
}

:host ::ng-deep .sindu_dragger li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: inherit;
}

:host ::ng-deep .sindu_dragger li table,
:host ::ng-deep .sindu_dragger tr,
:host ::ng-deep .sindu_dragger th,
:host ::ng-deep .sindu_dragger td {
  box-sizing: border-box;
}

:host ::ng-deep .sindu_dragging .sindu_origin_table {
  visibility: hidden;
}

:host ::ng-deep .gu-mirror li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: inherit;
}

:host ::ng-deep .gu-mirror li table,
:host ::ng-deep .gu-mirror tr,
:host ::ng-deep .gu-mirror th,
:host ::ng-deep .gu-mirror td {
  box-sizing: border-box;
}

:host ::ng-deep .gu-transit {
  opacity: 0.5;
}

:host ::ng-deep .devui-table.table-bordered {
  thead tr th.devui-checkable-cell {
    padding: 10px;
  }

  tbody > tr > td.devui-checkable-cell {
    padding: 10px;
  }
}
